<template>
  <div id="poster">
    <el-container class="tab-big">


      <!-- 菜单栏 -->
      <el-aside width="200px" class="menu">
        <div style="height:20px;">

        </div>
        <!-- 开通会员 -->
        <div class="vip">
          <div class="avatat-box">
            <div class="avatar">
              <el-avatar class="square-image" shape="square" :src="userInfo.avatar"> </el-avatar>
            </div>
          </div>
          <div>{{ this.userInfo.nickname }}</div>
          <div class="mini-text">加入Plus会员,享受更多特权</div>
          <button class="button-Plus" @click="Plus">升级Plus会员</button>
        </div>
        <el-menu :default-active="$route.path" class="el-menu-vertical-demo" active-class="active" router>

          <el-menu-item index="/user/info">个人信息</el-menu-item>
          <el-menu-item index="/user/security">账号安全</el-menu-item>
          <el-menu-item index="/user/analysis">分析统计</el-menu-item>
        </el-menu>
      </el-aside>

      <el-container class="view" >
        <!-- 展示位置 -->
        <!-- <div > -->
          <button class="gotohome"  @click="gotohome">&lt;&nbsp; 返回首页</button>
        <!-- </div> -->

        <router-view :userInfoCopy = userInfo></router-view>
      </el-container>

    </el-container>
  </div>
</template>




<script>
export default {
  name: "",
  components: {},


  data() {
    return {
      // userInfo: {
      //   avatar:
      //     "https://img0.baidu.com/it/u=1968668429,2104382916&fm=253&fmt=auto&app=138&f=JPEG?w=507&h=500",
      //   // nickname: "ikun",
      //   // email: "123@qq.com",
      //   // qqNumber: "未关联",
      //   // weChat: "未关联",
      //   // github: "未关联"
      // },
      userInfo:{}



    };
  },

  mounted(){
    this.getUserinfo()
  },
  methods:{
    Plus() {
        this.$message('暂未开发');
    },
    gotohome() {
      this.$router.push({ path: "/disk/home?category=0" });
    },
    //获取用户信息
    async getUserinfo(){
      console.log("获取用户信息...")
      // this.isLoading = true
      let res = await this.$store.dispatch("getUserInfo", {});
      // this.isLoading = false
      this.userInfo = res.data
      // this.userInfo.avatar = res.data.avatar
      // this.userInfo.nickname = res.data.nickname
      // this.userInfo.email = res.data.email

    },
  }

};
</script>

<style scoped>
#poster {
  height: 100%;
  margin: auto;
  background-color: #F2F6FC;

}

.el-aside {
  color: #333;
}



.tab-big {
  width: 1000px;
  height: 650px;
  /* border: 10px solid rgb(255,255,255); */
  margin: auto;
}

.view {
  /* margin: 5px; */
  width: 500px;
  height: 90%;
  background-color: #fff;
  margin-left: 20px;
  border-radius: 10px;
  box-shadow: 0 0px 5px #ece3e3;
  padding: 20px;
  text-align: left;
  margin-top: 15px;
}

.menu {
  background-color: #EBEEF5;
  margin-top: 15px;
  border-radius: 10px;
  height: 90%;
  box-shadow: 0px 0px 5px #DCDFE6;
}


.vip {
  height: 200px;
  line-height: 25px;
  /* background: rgb(255, 192, 203, .5); */
  text-align: center;
  
}

.avatar {
  width: 50px;
  /* 正方形容器的宽度 */
  height: 50px;
  /* 正方形容器的高度 */
  overflow: hidden;
  /* 超出容器部分隐藏 */
  position: relative;
  /* 使得子元素的绝对定位相对于容器 */
  /* border-radius: 50%; */
}


.avatat-box{
  display: flex;
  justify-content: center;
}

.square-image {
  width: 100%;
  /* 图片宽度填满容器 */
  height: 100%;
  /* 图片高度填满容器 */
  object-fit: cover;
  /* 图片按比例缩放并裁剪以填满容器 */
  object-position: center;
  /* 图片在容器中居中显示 */
}

.mini-text{
  color: #909399;
  font-size:12px;
  font-weight: 500;
  /* font-family: ; */
}

.button-Plus{
  margin-top: 20px;
  background: #ffa116;
  border: 0;
  color: #fff;
  width: 120px;
  height: 32px;
  line-height: 32px;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
}
.gotohome {
  /* margin: 5px; */
  height: 25px;
  border: 0;
  color: rgb(144, 147, 153);
  background-color: #fff;
  /* 禁止选中复制 */
  user-select: none;
}
.gotohome:hover {
  cursor: pointer;
  color: rgb(120, 186, 253);
}

.el-menu{
  background: #EBEEF5;

}
.el-menu-item{
  user-select: none;
  text-align: center;
  /* transition:; */
}

.el-menu-item.is-active{
  color: blue;
  border-radius: 8px;
  background: #DCDFE6;
}
.el-menu-item:focus, .el-menu-item:hover{
  outline: 0;
  border-radius: 8px;
  background: #DCDFE6;
}
</style>